import React from 'react';
import axios from 'axios';
import { Component } from 'react';
Component.prototype.$axios = axios;

export default class Show extends React.Component {
    render() {
        let article1;
        let article2;
        let article3;
        if (this.props.article[0]) {
            article1 = this.props.article[0];
            article2 = this.props.article[1];
            article3 = this.props.article[2];
        }
        return (
            <main>
                <div className='content-wrapper'>
                    <Category category={this.props.category} />
                    <div className='content'>
                        <Section article={article1} />
                        <Section article={article2} />
                        <Section article={article3} />
                        <button onClick={this.props.more}>更多...</button>
                    </div>
                </div>
            </main>
        )
    }
}

class Section extends React.Component {
    render() {
        let name;
        let img;
        if (this.props.article) {
            name = this.props.article.title;
            img = 'http://10.101.26.125:80'+this.props.article.image
        }
        return (
            <section className='first-content'>
                <img src={img}
                    alt='略略略' />
                <p>{name}</p>
            </section>
        )
    }
}

class Category extends React.Component {
    render() {
        let category;
        if (this.props.category) {
            category = this.props.category.name
        }
        return (
            <div className='category'>
                <h2>{category}</h2>
            </div>
        )
    }
}
